<style scoped>
</style>

<template>

  <div>

    <Modal
      v-model="IsModalShow"
      title="指令下发"
      :mask-closable="false"
      @on-cancel="cancel"
      width="1000"
    >

      <Form
        ref="ConfigInfo"
        :model="ConfigInfo"
        :label-width="150"
        value=true
        style="padding: 3px 18px"
      >
        <div style="padding-left:220px;">
          <Form-item
            label="指令名称"
            prop="sendName"
            :rules="{required: true, message: '必填', trigger:'blur',type:'string'}"
          >
            <Input
              v-model="ConfigInfo.sendName"
              style="width:200px;"
            ></Input>
          </Form-item>
        </div>

        <div class="split">
          <Split :value="0.5">
            <div
              slot="left"
              class="split-pane-left"
            >
              <Tag
                v-for="item in deviceList"
                :key="item.devId"
                :name="item.sim"
                color="warning"
                type="dot"
              >{{item.sim}}</Tag>
            </div>
            <div
              slot="right"
              class="split-pane-right"
            >
              <Row>
                <Col span="3">
                <i-switch v-model="switchParam.reportTime">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch>
                </Col>
                <Col span="21">
                <Form-item
                  label="每日首次上报时间"
                  prop="reportTime"
                  :rules="{required: switchParam.reportTime, message: '必填,hhMM比如上午8点上报,0800', trigger:'blur',type:'string',pattern: /^\d{4}$/}"
                >
                  <Input
                    v-model="ConfigInfo.reportTime"
                    :disabled="!switchParam.reportTime"
                  ></Input>
                </Form-item>
                </Col>
              </Row>
              <Row>
                <Col span="3">
                <i-switch v-model="switchParam.reportInterval">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch>
                </Col>
                <Col span="21">
                <Form-item
                  label="每日位置上报的间隔"
                  prop="reportInterval"
                  :rules="{required: switchParam.reportInterval, message: '必填,整数', trigger:'blur',type:'string',pattern:/^\d+$/}"
                >
                  <Input
                    v-model="ConfigInfo.reportInterval"
                    :disabled="!switchParam.reportInterval"
                  ></Input>
                </Form-item>
                </Col>
              </Row>
              <Row>
                <Col span="3">
                <i-switch v-model="switchParam.lastCheckTime">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch>
                </Col>
                <Col span="21">
                <Form-item
                  label="最近检修时间"
                  prop="lastCheckTime"
                  :rules="{required: switchParam.lastCheckTime, message: '必填,YYMMDDhhmmss格式', trigger:'blur',type:'string',pattern: /^\d{12}$/}"
                >
                  <Input
                    v-model="ConfigInfo.lastCheckTime"
                    :disabled="!switchParam.lastCheckTime"
                  ></Input>
                </Form-item>
                </Col>
              </Row>
              <Row>
                <Col span="3">
                <i-switch v-model="switchParam.checkTimes">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch>
                </Col>
                <Col span="21">
                <Form-item
                  label="合计检修次数"
                  prop="checkTimes"
                  :rules="{required: switchParam.checkTimes, message: '必填,整数', trigger:'blur',type:'string',pattern:/^\d+$/}"
                >
                  <Input
                    v-model="ConfigInfo.checkTimes"
                    :disabled="!switchParam.checkTimes"
                  ></Input>
                </Form-item>
                </Col>
              </Row>
              <Row>
                <Col span="3">
                <i-switch v-model="switchParam.workStatus">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch>
                </Col>
                <Col span="21">
                <Form-item
                  label="工作状态"
                  prop="workStatus"
                  :rules="{required: switchParam.workStatus, message: '必填', trigger:'change',type:'number'}"
                >
                  <Select
                    v-model="ConfigInfo.workStatus"
                    :disabled="!switchParam.workStatus"
                  >
                    <Option
                      v-for="item in workStatusList"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </Form-item>
                </Col>
              </Row>

              <Row>
                <Col span="3">
                <i-switch v-model="switchParam.lampWorkPeriod">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch>
                </Col>
                <Col span="21">
                <Form-item
                  label="指示灯工作时段"
                  prop="lampWorkPeriod"
                  :rules="{required: switchParam.lampWorkPeriod, message: '必填,00:00-07:12格式', trigger:'blur',type:'string',pattern: /^([01][0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?-([01][0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/}"
                >
                  <Input
                    v-model="ConfigInfo.lampWorkPeriod"
                    :disabled="!switchParam.lampWorkPeriod"
                  ></Input>
                </Form-item>
                </Col>
              </Row>
              <Row>
                <Col span="3">
                <i-switch v-model="switchParam.lampFirstTime">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch>
                </Col>
                <Col span="21">
                <Form-item
                  label="指示灯首次工作时间"
                  prop="lampFirstTime"
                  :rules="{required: switchParam.lampFirstTime, message: '必填,06:00格式', trigger:'blur',type:'string',pattern:/^([01][0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/}"
                >
                  <Input
                    v-model="ConfigInfo.lampFirstTime"
                    :disabled="!switchParam.lampFirstTime"
                  ></Input>
                </Form-item>
                </Col>
              </Row>
              <Row>
                <Col span="3">
                <i-switch v-model="switchParam.lampWorkPercent">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch>
                </Col>
                <Col span="21">
                <Form-item
                  label="指示灯工作占比"
                  prop="lampWorkPercent"
                  :rules="{required: switchParam.lampWorkPercent, message: '必填,0到100', trigger:'blur',type:'string',pattern:/^100$|^(\d|[1-9]\d)$/}"
                >
                  <Input
                    v-model="ConfigInfo.lampWorkPercent"
                    :disabled="!switchParam.lampWorkPercent"
                  ></Input>
                </Form-item>
                </Col>
              </Row>
              <Row>
                <Col span="3">
                <i-switch v-model="switchParam.lampSleepInterval">
                  <span slot="open">开</span>
                  <span slot="close">关</span>
                </i-switch>
                </Col>
                <Col span="21">
                <Form-item
                  label="指示灯休眠间隔时间"
                  prop="lampSleepInterval"
                  :rules="{required: switchParam.lampSleepInterval, message: '必填', trigger:'blur',type:'string'}"
                >
                  <Input
                    v-model="ConfigInfo.lampSleepInterval"
                    :disabled="!switchParam.lampSleepInterval"
                  ></Input>
                </Form-item>
                </Col>
              </Row>

            </div>
          </Split>
        </div>

      </Form>
      <div slot="footer">
        <Button
          type="default"
          @click="cancel"
        >关闭</Button>
        <Button
          type="primary"
          :loading="loading"
          @click="saveForm('ConfigInfo')"
        >保存</Button>
      </div>
    </Modal>
  </div>

</template>

<script>
import { sendConfig } from "@/api/device";
export default {
  props: {
    parentDeviceList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      IsModalShow: false,
      deviceList: [],
      loading: false,
      ConfigInfo: {
        sendName: "",
        reportTime: "",
        reportInterval: "",
        lastCheckTime: "",
        checkTimes: "",
        workStatus: "",
        lampWorkPeriod: "",
        lampFirstTime: "",
        lampWorkPercent: "",
        lampSleepInterval: ""
      },
      ConfigInfoParam: {
        reportTime: "0001",
        reportInterval: "0002",
        lastCheckTime: "0003",
        checkTimes: "0004",
        workStatus: "0005",
        lampWorkPeriod: "0006",
        lampFirstTime: "0007",
        lampWorkPercent: "0008",
        lampSleepInterval: "0009"
      },
      workStatusList: [
        { label: "正常状态", value: 1 },
        { label: "省电状态", value: 2 },
        { label: "待修状态", value: 3 },
        { label: "休眠状态", value: 4 }
      ],
      switchParam: {
        reportTime: true,
        reportInterval: true,
        lastCheckTime: true,
        checkTimes: true,
        workStatus: true,
        lampWorkPeriod: true,
        lampFirstTime: true,
        lampWorkPercent: true,
        lampSleepInterval: true
      }
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      if (curVal) {
        this.deviceList = JSON.parse(JSON.stringify(this.parentDeviceList));
        Object.keys(this.ConfigInfo).forEach(
          key => (this.ConfigInfo[key] = "")
        );
        Object.keys(this.switchParam).forEach(
          key => (this.switchParam[key] = true)
        );
      }
      this.IsModalShow = curVal;
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      this.$emit("listenModal");
    },
    saveForm(name) {
      this.$refs[name].validate(async valid => {
        if (valid) {
          this.loading = true;
          let sendName = this.ConfigInfo.sendName;
          //$参数Id|参数值
          let command = "";
          for (var key in this.ConfigInfoParam) {
            if (this.switchParam[key]) {
              command +=
                "$" + this.ConfigInfoParam[key] + "|" + this.ConfigInfo[key];
            }
          }

          let list = this.deviceList.map(item => {
            return {
              sim: item.sim,
              devId: item.devId,
              command: command,
              sendName: sendName
            };
          });

          try {
            let result = await sendConfig(list);

            if (result.code == 0) {
              this.$Message.success("提交成功,请前往下发历史页面查看记录");
              this.$emit("listenModal");
            } else {
              this.$Message.error(result.msg);
            }
          } catch (e) {
            this.$Message.error("服务器异常，稍后再试");
          }
          this.loading = false;
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.split {
  border: 1px solid #dcdee2;
  height: 540px;
}
.split-pane-left {
  padding: 20px 10px;
  height: 100%;
}
.split-pane-right {
  padding: 20px 20px;
}
</style>

